.input-with-select {
    border-radius:5px;
    overflow: hidden;
    border: none;
    padding: 0;
}
.input-with-select .el-input__inner:first-child {
    background-color: rgb(57, 64, 70) !important;
    color: rgba(255, 217, 86, 0.97) !important;
}
.input-with-select .el-input__inner:hover,.input-with-select .el-input__inner:focus{
    border-color: rgb(57, 64, 70);
}
.el-select .el-input {
    width: 100px;
}
.btn-search-icon{
    background-color: rgb(57, 64, 70) !important;
    color: #FFD04B !important;
    border-radius: 0;

    border: 5px solid #2a3237;
}

.input-with-select .el-input-group__prepend {
    color: #333333;
}

.btn_putAway{
    background-color: rgb(57, 64, 70) !important;
    color: #FFD04B !important;
}

.btn_putAway:hover{
    background-color: #40474d !important;
}

.masonry {
    width: 100%;
    position: relative;
    display: block;
    transition: 2s;
}

.masonry-item {
    position: absolute;
    width: 23%;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    transition: 0.8s;
    opacity: 0;
}

.masonry-item:hover {
    box-shadow: 2px 6px 8px 2px rgba(0, 0, 0, 0.2), 2px 8px 20px 2px rgba(0, 0, 0, 0.19);
}



.item1 {
    left: 10px;
}

.item2 {
    left: 26%;
}

.item3 {
    left: 51%;
}

.item4 {
    right: 10px;
}

.crafts-item-img {
    width: 100%;
    height: auto;
    cursor: pointer;
    z-index: 2;
    overflow-y: hidden;
    transition: 0.5s;
}

.crafts-item-info {
    width: 100%;
    text-align: left;
    padding: 10px 0 20px 0;
    margin-top: -5px;
    border-radius: 5px;
    z-index: 1;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.crafts-item-info div {
    /*width: 98%;*/
    margin: 0 auto;
    padding: 2px 10px 3px 10px;
    white-space: pre-wrap;
    word-break: break-all;
    word-wrap: break-word;
}



.crafts-item-author {
    font-weight: lighter;
}

.crafts-item-name {
    font-weight: bold;
    color: #4b4848;
    /*font-size: 0.8em;*/
    font-style: italic;
}

.crafts-item-Size {
    font-weight: lighter;
}

.crafts-item-options {
    position: relative;
    top: 8px;
    padding: 0 5px 5px 0 !important;

}
.crafts-item-options .btn_edit:hover{
    background-color: rgba(136, 169, 255,0.1) !important;
    color: rgb(64, 158, 255) !important;
}

.crafts-item-options .btn_edit:focus{
    color: black;
    background-color: white;
}



/*-----------------------------------------*/

.el-drawer, .rtl {
    padding: 60px 0 60px 0;
    min-width: 600px;
}

.el-drawer .el-drawer__body {
    background: white;
    padding: 0 30px 0 30px;
}

.el-drawer .drawer_options {
    width: 100%;
    position: absolute;
    bottom: 80px;
}

.el-drawer .el-form {
    width: 90%;
    margin: 30px auto;
}

.el-icon-circle-check {
    color: #2a9055;
}

.avatar-uploader .avatar{
    width: 146px;
    height: 146px;
    /*position: absolute;*/
    /*top: 0;*/
    /*left: 110px;*/
    z-index: 0;
    position: relative;
}
.avatar-uploader .el-icon-picture{
    position: absolute;
    /*top: 0;*/
    /*left: 110px;*/
    width: 146px;
    height: 86px;
    padding-top: 60px;
    z-index: 1;
    font-size: 2em;
    color:white;
    background: rgba(50, 50, 50, 0.4);
}

.el-footer {
    height: 45px !important;
    line-height: 40px !important;
    padding-top: 5px;
    background: rgba(255, 255, 255, 0.8) !important;
}

.el-pagination button {
    /*background: transparent!important;*/
    color: rgb(255, 208, 75) !important;
    background-color: rgb(43, 50, 55) !important;
}

.el-pagination li.active {
    color: rgb(255, 208, 75) !important;
    background-color: rgb(43, 50, 55) !important;
    border: none;

}

.el-pagination li:hover {
    color: rgb(255, 208, 75) !important;
}


